﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s5/s5-bg.jpg');
            background-repeat: no-repeat;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <canvas id="jzcavans0" style="position:absolute;top:0px; left:0px;" width='1920' height='1080'></canvas>
    <div id="container" style="position: absolute; top: 0px; left: 0px;  width:1920px; height:1080px;"></div>

    <div id="popupLayer" style="position: absolute; top: 0px; left: 0px;  width:1920px; height:1080px;"></div>
    <!--<div style="position:absolute;top:0px; left:0px;">
        <input type="button" onclick="showProjectDetail01()" value="中交二航局马尔代夫友谊大桥项目" />
        <input type="button" onclick="showProjectDetail02()" value="中信国华安哥拉项目" />
        <input type="button" onclick="showLZH()" value="兰州号" />
    </div>-->
    <div id="labelTime" style="position: absolute; color:#FFF; left:1555px; width:350px; top: 40px; font-size: 40px; font-family: Arial; ">
        2017-01-01 00:00
    </div>
    <div id="projDetailLayer" style="display:none; position: absolute; top: 279px; left: 40px; width: 1920px; height: 727px; background:url('./images/s5/s5-proj-bg.png') no-repeat;">
        <div style="position: absolute; top: 275px; left: 0px; width:700px; display:none;">
            <span style="position: absolute; left: 30px; top: 50px; width: 40px; text-wrap: normal; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                项目名称
            </span>
            <span style="position: absolute; left: 220px; top: 130px; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                项目经理:
            </span>
            <span style="position: absolute; left: 220px; top: 150px; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                业务段:
            </span>
            <div style="position: absolute; left: 220px; top: 170px; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                货量<span style="font-size:9px">(吨)</span>:
            </div>
            <span style="position: absolute; left: 220px; top: 190px; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                出发港口:
            </span>
            <span style="position: absolute; left: 220px; top: 229px; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                目的港口:
            </span>
            <span style="position: absolute; left: 30px; top: 340px; width: 40px; text-wrap: normal; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                项目批次
            </span>
            <span id="projTitle" style="position: absolute; left: 70px; top: 58px; color: white; width: 290px; height: 38px; overflow: hidden; font-family: 'Microsoft YaHei';">
                项目名称种子这里项目名称种子这里项目名称种子这里项目名称种子这里项目名称种子这里项目名称种子这里
            </span>
            <span id="projManager" style="position: absolute; left: 290px; top: 130px; color: white; width: 290px; height: 38px; overflow: hidden; font-family: 'Microsoft YaHei';">
                项目名称
            </span>
            <span id="projBiz" style="position: absolute; left: 285px; top: 158px; color: white; width: 290px; height: 38px; overflow: hidden; font-family: 'Microsoft YaHei';">
                项目名称
            </span>
            <span id="projValue" style="position: absolute; left: 285px; top: 170px; color: white; width: 290px; height: 38px; overflow: hidden; font-family: 'Microsoft YaHei';">
                货量
            </span>
            <span id="projSource" style="position: absolute; left: 225px; top: 190px; color: white; width: 160px; text-indent:4em; text-wrap:normal; height: 68px; overflow: hidden; font-family: 'Microsoft YaHei';">
                出发
            </span>
            <span id="projDest" style="position: absolute; left: 290px; top: 229px; color: white; width: 290px; height: 38px; overflow: hidden; font-family: 'Microsoft YaHei';">
                目的
            </span>
            <span id="projBatch" style="position:absolute; left:70px; top:340px; color:white; width:290px; height:120px; overflow:hidden; font-family:'Microsoft YaHei'; font-size:1em;">
                批次
            </span>
        </div>
    </div>
    <img src="./images/s5/s5-legend.png" style="position:absolute; left:1670px; top:830px;" />
    <script type="text/javascript" src="assets/jquery.js"></script>
    <script type="text/javascript" src="assets/echarts.min.js"></script>
    <script type="text/javascript" src="assets/dataTool.min.js"></script>
    <script type="text/javascript" src="assets/world.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode/jzcode.event.js"></script>
    <script src="./content/jzcode.sinotrans.js"></script>
    <script src="./content/s5-event.js"></script>
    <script type="text/javascript">
1
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        app.title = '65k+ 飞机航线';

        var g_project_selected = null;
        var g_selected_links = null;

        myChart.showLoading();

        var color = ['#a6c84c', '#ffa022', '#46bee9'];
        function itemStyle(idx) {
            return {
                normal: {
                    symbolSize: 10,
                    color: '#fff',
                    borderWidth: 10,
                    borderColor: ['rgba(30,144,255,1)', 'lime'][idx],
                    lineStyle: {
                        //shadowColor : ['rgba(30,144,255,1)','lime'][idx], //默认透明
                        //shadowBlur: 10,
                        //shadowOffsetX: 0,
                        //shadowOffsetY: 0,
                        type: 'solid'
                    }
                }
            }
        };

        var geoCoordMap = null;
        var geoLinks = null;
        var geoCoordMapHWJGML = null;
        var seriesSelected = {
            name: '选中的项目',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
                brushType: 'stroke',
                scale: 5.0
            },
            label: {
                normal: {
                    show: true,
                    formatter: '{b}',
                    textStyle: {
                        color: '#fff',
                        fontWeight: 'bold',
                        fontSize: 20
                    }
                }
            },
            symbolSize: 24,
            itemStyle: {
                normal: {
                    color: '#Fe2'
                }
            },
            data: [],
            z: 4
        };
        var seriesHLLink = {
            name: 'selLink',
            type: 'lines',
            symbol: ['none', 'none'],
            symbolSize: 10,
            effect: {
                show: true,
                symbolSize: 20,
                period: 5, // 运动周期，无单位，值越大越慢
                color: '#F00',
                trailLength: 0.2
            },
            lineStyle: {
                normal: {
                    color: '#ff0',
                    width: 8,
                    opacity: 0.4,
                    curveness: 0.2
                }
            },
            data: [],
            z: 4
        };
        var s5 = {
            createOption: function () {
                return {
                    title: [{
                        text: '',
                        x: 85,
                        y: 600,
                        textAlign: 'left',
                        textStyle: {
                            color: 'white',
                            fontSize: 24
                        }
                    }],
                    tooltip: {
                        formatter: function (param) {
                            return param;
                        }
                    },
                    graphic: {
                        elements: [{
                            id: 'layer-ydyl',
                            type: 'image',
                            left: 916,
                            top: 328,
                            style: {
                                image: './images/s5/s5-layer-ydyl.png'
                            },
                            z: 3
                        }, {
                            id: 'layer-lzh',
                            type: 'image',
                            left: 1000,
                            top: 336,
                            style: {
                                image: './images/s5/s5-layer-lzh.png'
                            }
                        }]
                    },
                    geo: {
                        map: 'world',
                        left: 100,
                        top: 200,
                        right: 100,
                        bottom: 100,
                        silent: true,
                        itemStyle: {
                            normal: {
                                borderColor: '#003',
                                color: 'rgb(105,182,223)',
                                shadowColor: 'rgba(50, 50, 50, 0.2)',
                                shadowBlur: 10
                            }
                        }
                    },
                    series: [{
                        name: '项目',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        rippleEffect: {
                            brushType: 'stroke',
                            scale: 5.0
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'bottom',
                                formatter: '{b}',
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        symbolSize: [22, 22],
                        itemStyle: {
                            normal: {
                                color: '#f00'
                            }
                        },
                        data: s5.convertCityData(),
                        z: 3
                    }, {
                        name: '海外机构目录项目',
                        type: 'scatter',
                        symbol: 'image://./images/s5/s5-icon-hwjgml.png',
                        symbolSize: [32, 20],
                        coordinateSystem: 'geo',
                        data: s5.convertPointDataHWJGML(),
                        z: 3
                    },
                    //{
                    //    name: 'project',
                    //    type: 'lines',
                    //    symbol: ['none', 'arrow'],
                    //    symbolSize: 3,
                    //    effect: {
                    //        show: true,
                    //        symbolSize: 8,
                    //        period: 10, // 运动周期，无单位，值越大越慢
                    //        color: '#fff',
                    //        trailLength:0.2
                    //    },
                    //    lineStyle: {
                    //        normal: {
                    //            color: '#229922',
                    //            width: 2,
                    //            opacity: 0.6,
                    //            curveness: 0.2
                    //        }
                    //    },
                    //    data: s5.convertProjectData(geoLinks),
                    //    z: 3
                    //},
                    seriesSelected, seriesHLLink]
                };
            },
            convertCityData: function () {
                var res = [];
                for (var i in geoCoordMap) {
                    var showName = false;
                    for (var iLink = 0; iLink < geoLinks.length; iLink++) {
                        if (geoLinks[iLink][1].name == i) {
                            showName = true;
                            break;
                        }
                    }

                    if (showName) {
                        if (geoCoordMap[i].type == '军工') {
                            res.push({
                                name: i,
                                value: geoCoordMap[i].coord.concat(100),
                                symbol: 'image://./images/s5/' + geoCoordMap[i].type + '.png',
                                symbolSize: [23, 24]
                            });
                        } else {
                            res.push({
                                name: i,
                                value: geoCoordMap[i].coord.concat(100),
                                symbol: 'image://./images/s5/' + geoCoordMap[i].type + '.png',
                                symbolSize: [23, 24]
                            });
                        }
                    } else {
                        if (geoCoordMap[i].type == '军工') {
                            res.push({
                                name: '',
                                value: geoCoordMap[i].coord.concat(100),
                                symbol: 'image://./images/s5/' + geoCoordMap[i].type + '.png',
                                symbolSize: [23, 24]
                            });
                        } else {
                            res.push({
                                name: '',
                                value: geoCoordMap[i].coord.concat(100),
                                symbol: 'image://./images/s5/' + geoCoordMap[i].type + '.png',
                                symbolSize: [23, 24]
                            });
                        }
                    }
                }
                return res;
            },
            convertSelectedCityData: function () {
                var res = [];
                for (var iselected = 0; iselected < g_project_selected.length; iselected++) {
                    for (var i in geoCoordMap) {
                        if (i == g_project_selected[iselected]) {
                            if (iselected == 0) {
                                res.push({
                                    name: i,
                                    value: geoCoordMap[i].coord.concat(1000),
                                    label: {
                                        normal: {
                                            position: 'left'
                                        }
                                    }
                                });
                            } else {
                                res.push({
                                    name: i,
                                    value: geoCoordMap[i].coord.concat(1000),
                                    label: {
                                        normal: {
                                            position: 'right'
                                        }
                                    }
                                });
                            }
                            break;
                        }
                    }
                }
                return res;
            },
            convertSelectedLinkData: function () {
                var res = [];
                //return res;

                for (var iselected = 0; iselected < g_selected_links.length; iselected++) {
                    var fName = g_selected_links[iselected][0];
                    var tName = g_selected_links[iselected][1];
                    var fromCoord = geoCoordMap[fName].coord;
                    var toCoord = geoCoordMap[tName].coord;

                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: g_selected_links[iselected][0],
                            toName: g_selected_links[iselected][1],
                            coords: [fromCoord, toCoord]
                        });
                    }
                }
                return res;
            },
            convertData: function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = geoCoordMap[dataItem[0].name].coord;
                    var toCoord = geoCoordMap[dataItem[1].name].coord;
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: dataItem[0].name,
                            toName: dataItem[1].name,
                            coords: [fromCoord, toCoord]
                        });
                    }
                }
                return res;
            },
            convertProjectData: function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = geoCoordMap[dataItem[0].name].coord;
                    var toCoord = geoCoordMap[dataItem[1].name].coord;
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: dataItem[0].name,
                            toName: dataItem[1].name,
                            coords: [fromCoord, toCoord]
                        });
                    }
                }
                return res;
            },
            convertPointDataHWJGML: function () {
                var res = [];
                for (var i in geoCoordMapHWJGML) {
                    res.push({
                        name: '',
                        value: geoCoordMapHWJGML[i].concat(100)
                    });
                }
                return res;
            }
        };

        $.get(jzcode.data.getUrl('data/data-s5-gcwlxtscxmsj.json'), function (data) {
            $.get(jzcode.data.getUrl('data/les-miserables.gexf.xml'), function (xml) {
                $.get(jzcode.data.getUrl('data/data-s5-hwjgml.json'), function (dataHWJGML) {
                    myChart.hideLoading();

                    geoCoordMap = data.coordMap;
                    geoLinks = data.links;

                    geoCoordMapHWJGML = dataHWJGML.coordMap;

                    var graph = echarts.dataTool.gexf.parse(xml);
                    var categories = [];
                    for (var i = 0; i < 9; i++) {
                        categories[i] = {
                            name: '类目' + i
                        };
                    }
                    graph.nodes.forEach(function (node) {
                        node.value = node.symbolSize;
                        node.symbolSize /= 1.5;
                        node.label = {
                            normal: {
                                show: false//node.symbolSize > 10
                            }
                        };
                        node.category = node.attributes.modularity_class;
                    });

                    option = s5.createOption();
                    myChart.setOption(option);
                }, 'json');
            }, 'xml');
        }, 'json');
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }


        var _cxt0 = null;
        var _cxt = null;
        var _num = 0;
        var g_interval = 30;
        var g_size0 = { w: 1920, h: 1080 };
        var g_size = { w: 1920, h: 300 };
        var g_haloArr = [{
            pos: { x: 560, y: 110 },
            size: { w: 816, h: 816 },
            angle: 60,
            minAngle: 0,
            maxAngle: 120,
            rotateSpeed: 6,
            url: './images/s5/s5-halo0.png'
        }, {
            pos: { x: 600, y: 150 },
            size: { w: 738, h: 738 },
            angle: 60,
            minAngle: 0,
            maxAngle: 120,
            rotateSpeed: 3.1415,
            url: './images/s5/s5-halo1.png'
        }];
        function init() {
            //_cxt0 = document.getElementById('jzcavans0').getContext("2d");

            //var imgHalo0 = new Image();
            //imgHalo0.src = g_haloArr[0].url;
            //g_haloArr[0].tex2D = imgHalo0;
            //var imgHalo1 = new Image();
            //imgHalo1.src = g_haloArr[1].url;
            //g_haloArr[1].tex2D = imgHalo1;

            window.setInterval(function () {
                Render();
            }, g_interval);
        }

        function Render() {
            _num++;
            //_cxt0.clearRect(0, 0, g_size0.w, g_size0.h);
            //for (var index = 0; index < g_haloArr.length; index++) {
            //    _cxt0.save();
            //    _cxt0.translate(g_haloArr[index].pos.x, g_haloArr[index].pos.y);
            //    _cxt0.translate(g_haloArr[index].size.w / 2, g_haloArr[index].size.h / 2);
            //    _cxt0.rotate(_num * g_haloArr[index].rotateSpeed / 1000 * g_interval);
            //    _cxt0.translate(-g_haloArr[index].size.w / 2, -g_haloArr[index].size.h / 2);
            //    _cxt0.drawImage(g_haloArr[index].tex2D, 0, 0, g_haloArr[index].size.w, g_haloArr[index].size.h);
            //    _cxt0.restore();
            //}
            var timeString = getNowFormatYYMMDDHHMM();
            $('#labelTime').html(timeString);
        }

        function getNowFormatYYMMDDHHMM() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var strHour = date.getHours();
            var strMinutes = date.getMinutes();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            if (strHour >= 0 && strHour <= 9) {
                strHour = "0" + strHour;
            }
            if (strMinutes >= 0 && strMinutes <= 9) {
                strMinutes = "0" + strMinutes;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + strHour + seperator2 + strMinutes;
            return currentdate;
        }
        init();
        register();
    </script>
    <!--<script>
        $(document).ready(function () {
            register();
        });
    </script>-->
</body>
</html>